<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const imgPath = computed(() => {
  const root = import.meta.env.DEV ? '/' : './'
  return `${root}images/apply/card/`
})
const router = useRouter()
const toMore = () => {
  router.push('/apply/covers')
}
</script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="container">
        <ul>
          <li>
            <div class="port-1 effect-1">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-1" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-1 effect-2">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-2" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-1 effect-3">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-3" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <div class="port-2 effect-1">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-1" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-2 effect-2">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-2" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-2 effect-3">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-3" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <div class="port-3 effect-1">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-1" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-3 effect-2">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-2" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-3 effect-3">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-3" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <div class="port-4 effect-1">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-1" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-4 effect-2">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-2" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-4 effect-3">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-3" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <div class="port-5 effect-1">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-1" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-5 effect-2">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-2" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-5 effect-3">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-3" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <div class="port-6 effect-1">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-1" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-6 effect-2">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-2" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-6 effect-3">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-3" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <div class="port-7 effect-1">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-1" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-7 effect-2">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-2" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-7 effect-3">
              <div class="image-box">
                <img :src="`${imgPath}img-1.jpg`" alt="Image-3" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
        </ul>
        <ul>
          <li>
            <div class="port-8 effect-1">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-1" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-8 effect-2">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-2" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
          <li>
            <div class="port-8 effect-3">
              <div class="image-box">
                <img :src="`${imgPath}img-2.jpg`" alt="Image-3" />
              </div>
              <div class="text-desc">
                <h3>Your Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt.
                </p>
                <a class="btn">Learn more</a>
              </div>
            </div>
          </li>
        </ul>
        <div class="more">
          <span class="text" @click="toMore">查看更多 &gt;&gt;</span>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #f1f9f9;
}
.container {
  margin: 0 auto;
  max-width: 1060px;
  ul {
    overflow: hidden;
    margin: 0 -1.5% 20px;
    li {
      float: left;
      width: 31.33%;
      margin: 10px;
      list-style: none;
      img {
        max-width: 100%;
        vertical-align: middle;
      }
      h3 {
        font-size: 20px;
        margin: 5px 0 10px;
      }
      p {
        font-weight: 300;
        line-height: 16px;
        font-size: 13px;
        margin-bottom: 15px;
      }
    }
  }
  .more {
    text-align: center;
    font-size: 16px;
    user-select: none;
    .text {
      display: inline-block;
      font-size: 16px;
      color: var(--color2);
      line-height: 1.8;
      cursor: pointer;
    }
  }
}

.text-desc {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  height: 100%;
  opacity: 0;
  width: 100%;
  padding: 20px;
}

.btn {
  display: inline-block;
  padding: 5px 10px;
  font-size: 14px;
  color: #fff;
  border: 2px solid #4d92d9;
  background-color: #4d92d9;
  text-decoration: none;
  transition: 0.4s;
  &:hover {
    background-color: transparent;
    color: #4d92d9;
    transition: 0.4s;
  }
}
.port-1 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  .text-desc {
    opacity: 0.9;
    top: -100%;
    transition: 0.5s;
    color: #000;
    padding: 45px 20px 20px;
  }
  img {
    transition: 0.5s;
  }
  &:hover {
    img {
      transform: scale(1.2);
    }
  }
  &.effect-1:hover .text-desc {
    top: 0;
  }
  &.effect-2 {
    .text-desc {
      top: auto;
      bottom: -100%;
    }
    &:hover {
      .text-desc {
        bottom: 0;
      }
    }
  }
  &.effect-3 {
    .text-desc {
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      overflow: hidden;
      padding: 0;
    }
    &:hover {
      .text-desc {
        width: 100%;
        top: 0;
        left: 0;
        height: 100%;
        padding: 45px 20px 20px;
      }
    }
  }
}

.port-2 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  perspective: 800px;
  .text-desc {
    z-index: -1;
    transition: 0.6s;
  }
  .image-box {
    transition: 0.4s;
  }
  &:hover {
    .image-box {
      transform: rotateX(80deg);
      transform-origin: center bottom 0;
      transition: 0.4s;
    }
  }
  &.effect-1 {
    &:hover {
      .text-desc {
        opacity: 1;
      }
    }
  }
  &.effect-2 {
    .text-desc {
      opacity: 1;
      top: -100%;
    }
    &:hover {
      .text-desc {
        top: 0;
      }
    }
  }
  &.effect-3 {
    .text-desc {
      opacity: 1;
      top: auto;
      bottom: -100%;
    }
    &:hover {
      .text-desc {
        bottom: 0;
      }
    }
  }
}

.port-3 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  perspective: 500px;
  img {
    transition: 0.5s;
  }
  &.effect-1 {
    .text-desc {
      z-index: -1;
      transition: 0.5s;
      transform: rotateX(80deg);
      transform-origin: center top 0;
      padding: 45px 20px 20px;
      opacity: 1;
    }
    &:hover {
      .text-desc {
        transform: none;
      }
      img {
        opacity: 0;
        transform: scale(1.2);
      }
    }
  }
  &.effect-2 {
    .text-desc {
      z-index: -1;
      transition: 0.5s;
      transform: rotateX(80deg);
      transform-origin: center bottom 0;
      top: auto;
      bottom: 0;
      padding: 45px 20px 20px;
    }
    &:hover {
      .text-desc {
        transform: none;
        opacity: 1;
      }
      img {
        transform: translateY(-100%);
      }
    }
  }
  &.effect-3 {
    .text-desc {
      z-index: -1;
      transition: 0.5s;
      transform: rotateX(80deg);
      transform-origin: center top 0;
      padding: 45px 20px 20px;
    }
    &:hover {
      .text-desc {
        transform: none;
        opacity: 1;
      }
      img {
        transform: translateY(100%);
      }
    }
  }
}
.port-4 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  z-index: 10;
  &.effect-1 {
    img {
      transition: 0.5s;
      transform: rotateY(360deg) scale(1, 1);
    }
    .text-desc {
      transform: rotateY(0deg) scale(0, 0);
      transition: 0.5s;
      opacity: 0;
      padding: 45px 20px 20px;
    }
    &:hover {
      .text-desc {
        transform: rotateY(360deg) scale(1, 1);
        opacity: 1;
      }
      img {
        transform: rotateY(0deg) scale(0, 0);
      }
    }
  }
  &.effect-2 {
    z-index: 12;
    img {
      transition: 0.5s;
      transform: rotateX(360deg) scale(1, 1);
    }
    .text-desc {
      transform: rotateX(0deg) scale(0, 0);
      transition: 0.5s;
      opacity: 0;
      padding: 45px 20px 20px;
    }
    &:hover {
      .text-desc {
        transform: rotateX(360deg) scale(1, 1);
        opacity: 1;
      }
      img {
        transform: rotateX(0deg) scale(0, 0);
      }
    }
  }
  &.effect-3 {
    img {
      transition: 0.5s;
      transform: rotate(360deg) scale(1, 1);
    }
    .text-desc {
      transform: rotate(0deg) scale(0, 0);
      transition: 0.5s;
      opacity: 0;
      padding: 45px 20px 20px;
    }
    &:hover {
      .text-desc {
        transform: rotate(360deg) scale(1, 1);
        opacity: 1;
      }
      img {
        transform: rotate(0deg) scale(0, 0);
      }
    }
  }
}
.port-5 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  overflow: visible;
  &.effect-1 {
    z-index: 9;
    img {
      transition: 0.5s;
    }
    .text-desc {
      transform: translateX(100%);
      opacity: 0;
      padding: 40px 20px 20px 90px;
      transition: 0.5s;
    }
    &:hover {
      img {
        transform: scale(0.5) translateX(-100%);
        position: relative;
        z-index: 9;
        border: 6px solid rgba(255, 255, 255, 0.9);
      }
      .text-desc {
        transform: translateX(0px);
        opacity: 1;
      }
    }
  }
  &.effect-2 {
    z-index: 10;
    img {
      transition: 0.5s;
      transform: none;
    }
    .text-desc {
      transform: translateY(-100%);
      opacity: 0;
      padding: 20px;
      transition: 0.5s;
    }
    &:hover {
      img {
        transform: scale(0.5) translateY(100%);
        position: relative;
        z-index: 9;
        border: 6px solid rgba(255, 255, 255, 0.9);
      }
      .text-desc {
        transform: translateY(0px);
        opacity: 1;
      }
    }
  }
  &.effect-3 {
    img {
      transition: 0.5s;
    }
    .text-desc {
      transform: translateX(-100%);
      opacity: 0;
      padding: 40px 90px 20px 20px;
      transition: 0.5s;
    }
    &:hover {
      img {
        transform: scale(0.5) translateX(100%);
        position: relative;
        z-index: 9;
        border: 6px solid rgba(255, 255, 255, 0.9);
      }
      .text-desc {
        transform: translateX(0px);
        opacity: 1;
      }
    }
  }
}

.port-6 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  overflow: visible;
  &.effect-1 {
    z-index: 8;
    img {
      transition: 0.5s;
    }
    .text-desc {
      transform: translateY(-100%);
      opacity: 0;
      padding: 10px 20px;
      transition: 0.5s;
    }
    &:hover {
      img {
        transform: scale(0.3) translateY(110%);
        position: relative;
        z-index: 9;
      }
      .text-desc {
        transform: translateY(0px);
        opacity: 1;
      }
    }
  }
  &.effect-2 {
    z-index: 7;
    img {
      transition: 0.6s;
      z-index: 1;
    }
    .text-desc {
      transform: translateX(-100%);
      opacity: 0;
      padding: 40px 120px 20px 20px;
      transition: 0.6s;
    }
    &:hover {
      img {
        transform: scale(0.3) translateX(110%);
        position: relative;
        z-index: 9;
      }
      .text-desc {
        transform: translateX(0px);
        opacity: 1;
      }
    }
  }
  &.effect-3 {
    img {
      transition: 0.5s;
    }
    .text-desc {
      transform: translateY(100%);
      opacity: 0;
      padding: 85px 20px 10px;
      transition: 0.5s;
    }
    &:hover {
      img {
        transform: scale(0.3) translateY(-110%);
        position: relative;
        z-index: 9;
      }
      .text-desc {
        transform: translateY(0px);
        opacity: 1;
      }
    }
  }
}
.port-7 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  overflow: hidden;
  .text-desc {
    opacity: 0;
    transition: 0.5s;
    color: #000;
  }
  &.effect-1 {
    img {
      transition: 0.5s;
      position: relative;
      width: 100%;
      left: 0;
    }
    .text-desc {
      transform: perspective(600px) rotateY(90deg);
      transform-origin: left center 0;
      width: 50%;
      position: absolute;
      left: 0;
      top: 0;
      padding: 18px 10px;
    }
    &:hover {
      img {
        left: 50%;
      }
      .text-desc {
        opacity: 1;
        transform: perspective(600px) rotateY(0deg);
        z-index: 99;
      }
    }
  }
  &.effect-2 {
    img {
      transition: 0.5s;
      position: relative;
      width: 100%;
      top: 0;
    }
    .text-desc {
      transform: perspective(600px) rotateX(90deg);
      transform-origin: top center 0;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      height: 55%;
      padding: 5px 10px;
    }
    &:hover {
      img {
        top: 50%;
      }
      .text-desc {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg);
        z-index: 99;
      }
    }
  }
  &.effect-3 {
    img {
      transition: 0.5s;
      position: relative;
      width: 100%;
      right: 0;
    }
    .text-desc {
      transform: perspective(600px) rotateY(-90deg);
      transform-origin: right center 0;
      width: 50%;
      position: absolute;
      left: auto;
      right: 0;
      top: 0;
      padding: 18px 10px;
    }
    &:hover {
      img {
        right: 50%;
      }
      .text-desc {
        opacity: 1;
        transform: perspective(600px) rotateY(0deg);
        z-index: 99;
      }
    }
  }
}
.port-8 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  overflow: hidden;
  .text-desc {
    opacity: 0;
    transition: 0.5s;
    color: #000;
    padding: 45px 20px 20px;
  }
  &.effect-1 {
    img {
      transition: 0.5s;
    }
    .text-desc {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      transform: scale(0);
      backface-visibility: hidden;
    }
    &:hover {
      img {
        transform: scale(1.1);
      }
      .text-desc {
        opacity: 1;
        transform: scale(1);
        border-radius: 20%;
      }
    }
  }
  &.effect-2 {
    img {
      transition: 0.5s;
    }
    .text-desc {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      transform: scale(0);
      backface-visibility: hidden;
    }
    &:hover {
      img {
        transform: scale(1.1);
      }
      .text-desc {
        opacity: 1;
        transform: scale(1);
        border-radius: 50% 0 50% 0;
      }
    }
  }
  &.effect-3 {
    img {
      transition: 0.5s;
    }
    .text-desc {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      transform: scale(0);
      backface-visibility: hidden;
      background: none;
      padding: 40px 70px 20px;
      &:before,
      &:after {
        background-color: #fff;
        border-radius: 50% 50% 0 0;
        content: '';
        height: 100%;
        left: 50%;
        position: absolute;
        top: 0;
        transform: rotate(-50deg);
        transform-origin: 0 100% 0;
        width: 50%;
        z-index: -1;
      }
      &:after {
        left: 0;
        transform: rotate(50deg);
        transform-origin: 100% 100% 0;
      }
    }
    &:hover {
      img {
        transform: scale(1.1);
      }
      .text-desc {
        opacity: 1;
        transform: scale(1);
      }
    }
  }
}
</style>
